<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
    <p>这是引入的utils(是奇数num+100;是偶数num+200):{{ handleFilter(2) }}</p>
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="Tab 1">
        <page1 />
      </a-tab-pane>
      <a-tab-pane key="2" tab="Tab 2">
        <page2 />
      </a-tab-pane>
      <a-tab-pane key="3" tab="Tab 3">
        <Description />
      </a-tab-pane>
      <a-tab-pane key="4" tab="Tab 4">
        <Collapse />
      </a-tab-pane>
      <a-tab-pane key="5" tab="Tab 5">
        <a-button @click="getTypeValue">改变type值</a-button>
        <a-button @click="getInputValue">获取输入框的值</a-button>
        <Test :type="type" ref="formRef" />
        <div>{{ inputVal }}</div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import page1 from './components/page1.vue'
import page2 from './components/page2.vue'
import page3 from './components/page3.vue'
import { handleFilter } from 'remote_app1/utils'
const activeKey = ref('1')
const type = ref(true)
const formRef = ref()
const inputVal = ref()
const getTypeValue = () => {
  type.value = !type.value
}
const getInputValue = () => {
  console.log(formRef.value.getValue(), '获取的值')
  inputVal.value = formRef.value.getValue()
}
</script>
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
